<template>
	<div class="sellerRegist">

		<div class="isLogin">
			<a href="#/" class="index fa fa-chevron-left" slot='a'></a>
			<div class="head">
				<a v-if="seller" href="#/seller/info"><img :src="'http://localhost:2200'+seller.avatar" /></a>
				<a v-if="!seller"><img src="/static/img/default_seller.png" /></a>
				<p><a href="#/seller/info"><b v-if='seller'>{{seller.nickName}} </b></a>

					<b class="login" v-if='!seller'><a href="#/seller/login">登录</a>/<a href="#/seller/regist">注册</a></b> 
					<span v-if="seller"><i class="fa fa-dashcube"></i>荣誉值 {{seller.score}}</span></p>
					<p class="describe" v-if="seller">{{seller.describe}}</p>
					<b class="follow" v-if='seller'>关注量  {{seller.follows}}</b>
			</div>
			<main>
				<ul v-if='seller'>
					<li>
						<a href="#/seller/info"><i class="fa fa-cog"></i><span>
							个人设置
						</span></a>
					</li>
					<li>
						<a href="#/seller/goods"><i class="fa fa-cubes"></i><span>我的商品</span></a>
					</li>
					<li>
						<a href="#/seller/add"><i class="fa fa-plus-square"></i><span>添加商品</span></a>
					</li>
					<li>
						<a href="#/seller/act"><i class="fa fa-bullhorn"></i><span>店铺活动</span></a>
					</li>
					<li>
						<a href="#/seller/message"><i class="fa fa-wechat"></i><span>消息列表</span></a>
					</li>

				</ul>
				
				
				<ul v-if='!seller'>
					<li>
						<a><i class="fa fa-cog"></i><span>
							个人设置
						</span></a>
					</li>
					<li>
						<a><i class="fa fa-cubes"></i><span>我的商品</span></a>
					</li>
					<li>
						<a><i class="fa fa-plus-square"></i><span>添加商品</span></a>
					</li>
					<li>
						<a><i class="fa fa-bullhorn"></i><span>店铺活动</span></a>
					</li>
					<li>
						<a><i class="fa fa-wechat"></i><span>消息列表</span></a>
					</li>

				</ul>
				
				<p v-if="seller" @click="out">退出登录</p>
			</main>

		</div>
		<alert :title='content' v-model='show'>

		</alert>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import { Alert } from 'vux'
	import { mapState, mapGetters } from 'vuex'
	import SellerTap from '../components/SellerTap'
	export default {
		data: function() {
			return {
				uname: '',
				pwd: '',
				isOk: true,
				fei1: true,
				fei2: true,
				isView: false,
				content: '',
				show: false

			}
		},
		components: {
			SellerTap,
			Alert
		},
		computed: {
			...mapState([
				'seller', 'categorys', 'data3'
			]),
		},
		methods: {

			out() {
				axios.get('/seller/out').then((result) => {
					if(result.data.msg == 'success') {
						this.$store.commit('updateSeller', null);
					};
				}).catch((err) => {
					console.log(err);
				})
			}
		}
	}
</script>

<style scoped>
	main {
		padding: 10px;
		padding-top: 50px;
	}
	
	main img {
		display: block;
		width: 80px;
		margin: 0 auto;
		margin-bottom: 30px;
	}
	
	main form div {
		border-bottom: solid 1px #ddd;
		padding: 7px 0;
		line-height: 30px;
	}
	
	main form div span {
		margin-right: 10%;
	}
	
	main form div input {
		width: 55%;
		line-height: 30px;
		border: none;
		margin-right: 10px;
		background: none;
	}
	
	main button {
		border: none;
		background: red;
		color: white;
		margin-top: 40px;
		line-height: 40px;
		width: 100%;
		font-size: 17px;
		cursor: pointer;
	}
	
	.fa-times-circle {
		color: #aaa;
	}
	
	.fa-eye-slash {
		color: #ccc;
	}
	
	form div i:first-child {
		display: none;
	}
	
	form i {
		margin-right: 7px;
		font-size: 17px;
	}
	
	.foot {
		margin-top: 50px;
		font-size: 13px;
	}
	
	.foot a {
		font-size: 16px;
		margin-left: 30px;
		color: orangered;
	}
	
	.dis {
		color: darkgray;
		background: #ddd;
	}
	
	.head {
		height: 100px;
		background: url(/static/img/bg.jpg);
		background-size: 100%;
		padding: 20px;
		padding-top: 32px;
		overflow: hidden;
		position: relative;
	}
	
	.head>a {
		width: 30%;
		float: left;
		
	}
	
	.head>a img {
		height: 60px;
		width: 60px;
		border-radius: 50%;
	}
	
	.head p {
		font-size: 20px;
		position: relative;
		float: left;
		width: 70%;
		line-height: 60px;
		padding-left: 20px;
		color: white;
	}
	
	.head p i {
		margin-right: 5px;
	}
	
	.head p span {
		font-size: 12px;
		position: absolute;
		right: -20px;
		padding: 10px;
		top: -10px;
		line-height: 10px;
		border-top-left-radius: 10%;
		border-bottom-left-radius: 10%;
		background: linear-gradient(to right, #FF9966 10%, #FF6600 100%);
		
	}
	
	main {
		padding-top: 50px;
	}
	
	ul li {
		padding-left: 20px;
		padding-right: 20px;
		padding: 10px 0;
		border-bottom: solid 1px #eee;
	}
	
	ul li a {
	
		position: relative;
	}
	ul li a span{
		margin-left: 35px;
	}
	main p:last-child {
		margin: 20px;
		background: orangered;
		text-align: center;
		line-height: 35px;
		color: white;
		cursor: pointer;
		margin-top: 100px;
	}
	
	a.index {
		position: absolute;
		color: white;
		top: 10px;
		left: 10px;
		font-size: 18px;
		z-index: 30;
		
	}
	.head>p>a>b{
		font-size: 20px;
		margin-left: 5%;
	}
	
	a i {
		position: absolute;
		top: 0;
		left: 0;
		margin-right: 10px;
		font-size: 20px;
		color: orangered;
	}
	
	p b {
		font-size: 16px;
		color: white;
		position: relative;
		left: -45px;
		font-weight: 500;
	}
	
	p b a {
		color: white;
		text-decoration: none;
		
	}
	.follow{
		position: absolute;
		padding: 1px 4px;
		border-radius: 10%;
		font-size: 12px;
		right: -5px;
		padding: 10px;
		line-height: 12px;
		color: white;
		font-weight: normal;
		top: 60px;
		border-top-left-radius: 10%;
		border-bottom-left-radius: 10%;
		background: linear-gradient(to right, #FF9966 10%, #FF6600 100%);
	}
	p.describe{
		font-size: 11px;
		position: absolute;
		bottom: -20%;
		width: 60%;
		left: 17%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>